<template>
  <div class="FormAuditing">
    <div class="btn-line mb10 ">
      <div class="btn-descide-label mr10">审核结果：</div>
      <button
        v-if="!readOnly || (readOnly && status === 'yes')"
        type="button" class="mr10"
        :class="getBtnClass('yes')"
        @click="handleRes('yes')">
        审核通过
      </button>
      <button
        v-if="!readOnly || (readOnly && status === 'no')"
        type="button" :class="getBtnClass('no')"
        @click="handleRes('no')">
        审核不通过
      </button>
    </div>
    <slot name="addForm"></slot>
    <div v-if="status !== 'none'" class="status-box">
      <h3 class="txtRes">
        <i class="bar mr5"></i>
        {{status === 'yes' ? txtRes[0] : txtRes[1]}}
      </h3>
      <slot name="aboveTextarea"></slot>
    </div>

    <FormTextarea
      v-if="textareaExistList.includes(status)"
      :val="textareaVal" :titTxt="textareaTit" :disabled="readOnly"
      @update:val="$emit('update:textareaVal', $event)"/>
  </div>
</template>

<script type="text/ecmascript-6">
  import FormTextarea from '@/components/FormTextarea'

  export default {
    components: {FormTextarea},
    props: {
      // 支持.sync
      status: {
        type: String,
        required: true,
        validator: val => ['none', 'yes', 'no'].includes(val)
      },
      readOnly: {
        type: Boolean,
        default: false
      },
      // textarea在不同status时是否存在
      textareaExistList: {
        type: Array,
        default: () => ['no']
      },
      // 支持.sync
      textareaVal: {
        required: true
      },
      // textarea的标题文本
      textareaTit: {
        type: String,
        default: ''
      },
      textareaAttrs: {
        type: Object,
        default: () => ({})
      },
      // 审核结果对应的文本
      txtRes: {
        type: Array,
        default: () => ['同意该申请', '不同意该申请'],
        validator: val => val.length === 2
      }
    },
    methods: {
      getBtnClass (type) {
        if (!['yes', 'no'].includes(type)) return

        let o = {}
        o[this.status === type ? 'btn-descide-' + type : 'btn-descide-unactive'] = true
        o.readOnly = this.readOnly
        return o
      },
      handleRes (res) {
        this.$emit('update:status', res)
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  @import '~@/assets/css/public.scss';

  .FormAuditing {
  }

  .readOnly {
    cursor: default;
  }

  .txtRes {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #{$c-eee};
    background-color: #f2f2f2;
    line-height: 40px;
    .bar {
      display: inline-block;
      width: 4px;
      height: 14px;
      background-color: #{$c-main};
    }
  }
</style>
